<template>
	<view>
		<view class="row" v-if="bankList.length != 0" @click="supportList">
			<image src="../../static/img/bank_head_icon.png" mode="aspectFill" class="head_icon"></image>
			<span class="head_info">我们支持绑定的银行</span>
		</view>
		
		<view v-for="(item, index) in bankList" :key="index" class="row_center bank_item flex_one">
			<image :src="item.bankCardUrl" mode="aspectFill" class="bank_bg"></image>
			<image src="" mode="aspectFill" class="bank_logo"></image>
			<view style="display: flex;flex-direction: column;">
				<span class="bank_name">{{item.bankName}}</span>
				<span class="bank_num" style="line-height: 1.0;">尾号{{item.bankCardNo}}储蓄卡</span>
			</view>
			<span class='flex_one'></span>
			<span class="bank_action" @click="delAction(index)">解绑</span>
		</view>
		
		<view class="empty_wrap col" v-if="bankList.length == 0">
			<image src="../../static/img/bank_empty.png" mode="aspectFill"></image>
			<span>您还没有添加过银行卡哟~</span>
			<span class="action_now_btn" @click="addBank">立即添加</span>
		</view>
		
		<div class="modal-mask row_center" v-if="isShowForgetPwd" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="col update_content_bg forget_wrap">
						<image src="../../static/img/forget_dialog_close.png" mode="aspectFill" @click="thinkAction"></image>
						<view class="title">解绑尾号{{bankCardNo}}的银行卡？</view>
						<view class="retry_btn" @click="sureAction">确定解绑</view>
						<view class="forget_btn" @click="thinkAction">再考虑一下</view>
					</div>
				</div>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { BASE_URL,listBank,delBank } from '@/utils/api'
	
	export default {
		data() {
			return {
				bankList:[],
				isShowForgetPwd: false,
				bankCardNo: '',
				bankID: 0
			}
		},
		methods: {
			supportList(){
				uni.navigateTo({
					url: '/pages/support_bank/support_bank'
				})
			},
			async listBank(){
				let res = await listBank();
				if(res.code == 1){
					this.bankList = res.data;
					this.$forceUpdate();
				}
			},
			thinkAction(){
				this.isShowForgetPwd = false;
			},
			goToAction(index){
				this.isShowForgetPwd = true;
				this.bankCardNo = this.bankList[index].bankCardNo;
			},
			async sureAction(){
				let res = await delBank(this.bankID);
				if(res.code == 1){
					uni.showToast({
						image:'../../static/img/bank_release_icon.png',
						duration:1000,
						title:"解绑成功"
					});
					this.isShowForgetPwd = false;
					setTimeout(()=>{
						this.listBank();
					}, 1000);
				}else{
					uni.showToast({
						icon:'none',
						duration:2000,
						title:res.message
					});
				}
				
			},
			addBank(){
				uni.navigateTo({
					url:'../add_bank/add_bank'
				})
			},
			delAction(index){
				this.isShowForgetPwd = true;
				this.bankCardNo = this.bankList[index].bankCardNo;
				this.bankID = this.bankList[index].id;
			}
		},
		onShow() {
			this.listBank();
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/add_bank/add_bank'
			})
		}
	}
</script>

<style>
	page{background: #F1F1F1;}
.head_icon{width: 30upx; height: 30upx; margin: 22upx 11upx 22upx 30upx;}
.head_info{font-size: 26upx; font-weight: bold;color: #4A65F7;}

.bank_item{margin: 0upx 30upx 20upx; position: relative; z-index: 2; height: 200upx; font-size: 26upx; color: #FFFFFF; padding-right: 40upx;}
.bank_item .bank_bg{width: 100%; height:100%; position: absolute;top: 0upx; left: 0upx; z-index: -1; border-radius: 10upx;}
.bank_item .bank_logo{width: 60upx; height:60upx; margin:0upx 20upx 0upx 36upx;border-radius: 50%;}
.bank_item .bank_name{font-weight: bold; font-size: 32upx; margin-bottom: 18upx;line-height: 1.0;}
.bank_item .bank_action{font-weight: bold; font-size: 26upx; z-index: 100; }

.forget_wrap{}
.forget_wrap image{width: 48upx; height: 48upx; position: absolute; top: 13upx; right: 13upx;}
.forget_wrap .title{color: #333333; font-size: 32upx; font-weight: bold; margin: 58upx 0upx;}
.forget_wrap .retry_btn{width: 280upx; text-align: center; height: 74upx; line-height: 74upx; background: #FFCA0A; font-size: 32upx; color: #333333;border-radius: 12upx;margin-bottom: 27upx;}
.forget_wrap .forget_btn{ font-size: 32upx; color: #999999;margin-bottom: 58upx;}

.empty_wrap{font-size: 24upx; color: #999999; margin-top: 253upx;}
.empty_wrap image{width: 200upx; height: 220upx; margin-bottom: 18upx;}
.action_now_btn{background: #FFCA0A; border-radius: 12upx; font-size: 32upx; color: #333333; width: 280upx; text-align: center;height: 74upx;line-height: 74upx; margin-top: 59upx; font-weight: bold;}

</style>
